<script lang="ts" setup>
import SortItem from "./components/sort-item.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const sortList = [
  {
    name: "客车",
    enName: "Passenger car",
    img: "https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/04/17/png/客车_20240417151907A006.png",
  },
  {
    name: "货车",
    enName: "truck car",
    img: "https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/04/17/png/装载车_20240417145154A001.png",
  },
  {
    name: "小车",
    enName: "Small car",
    img: "https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/04/17/png/轿车_20240417145341A002.png",
  },
  {
    name: "摩托车",
    enName: "Motorcycle",
    img: "https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/04/17/png/摩托车_20240417145626A003.png",
  },
  {
    name: "房车",
    enName: "Touring car",
    img: "https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/04/17/png/房车_20240417145734A004.png",
  },
  {
    name: "残疾人车",
    enName: "Disabled car",
    img: "https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/04/17/png/残疾人-蓝_20240417145949A005.png",
  },
];

const toList = (type: string) => {
  router.push(`/mallList/${type}`);
};
</script>

<template>
  <div class="h-full" style="background: #fff; padding: 20px">
    <div class="_title">选择报名车型</div>
    <div class="_sub-title">多种车型，一触即达</div>
    <div class="list-grid">
      <div v-for="(item, index) in sortList" :key="index" @click="toList(item.name)">
        <SortItem :sort="item" />
      </div>
    </div>
  </div>
</template>

<style>
._title {
  font-size: 24px;
  font-weight: bolder;
  margin: 20px 0 10px;
}
._sub-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 40px;
}

.list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
</style>
